<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="店铺名称" width="">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="img" label="店铺照片" width="">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.img" shape="square" @click.native="handleImgClick(scope.row.img)" />
        </template>
      </el-table-column>
      <el-table-column prop="permit_img" label="营业执照" width="">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.permit_img" shape="square" @click.native="handleImgClick(scope.row.permit_img)" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="绑定手机号" width="" />
      <el-table-column prop="details" label="地址" width="" />
      <el-table-column prop="created_at" label="申请时间" width="200" />
      <el-table-column prop="updated_at" label="处理时间" width="200" />
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <span class="agree" @click="handleAgree(scope)">同意</span>
          <span class="refuse" @click="handleRefuse(scope)">拒绝</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="imgDialogVisiable">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <refuse-reason :dialog-visible="dialogVisible" @closeDialog="handleCloseDialog" />
  </div>
</template>
<script>
import RefuseReason from './refuseReason'
import { dealWithShopApply } from '@/api/shop'
const ERR_OK = 200
export default {
  components: {
    RefuseReason
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      id: '',
      dialogImageUrl: '',
      imgDialogVisiable: false
    }
  },
  methods: {
    handleImgClick(img) {
      this.dialogImageUrl = img
      this.imgDialogVisiable = true
    },
    handleAgree(scope) {
      this._dealWithShopApply({ status: 'pass', id: scope.row.id })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleRefuse(scope) {
      this.dialogVisible = true
      this.id = scope.row.id
    },
    handleCloseDialog(params) {
      this.dialogVisible = false
      this._dealWithShopApply({ status: 'return', id: this.id, remark: params.remark })
        .then(() => {
          this.$emit('success')
        })
        .catch(err => {
          console.log(err)
        })
    },
    _dealWithShopApply({ status, remark, id }) {
      return new Promise((resolve, reject) => {
        dealWithShopApply({ status, remark, id })
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this._success(res)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _success(res) {
      this.$message({
        message: res.message,
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .agree {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .refuse {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell{
  .el-avatar{
    margin-right: 15px;
  }
}
</style>
